<template>
    <div class="layout">
        <div class="left">
            <el-menu @select="select" :unique-opened="true" :collapse-transition="false" mode="vertical">
                <el-menu-item v-for="item, index in routes" :index="item.path" :key="index">
                    <div v-if="!item.children || !item.children.length">
                        <i class="el-icon-location"></i><span>{{ item.meta.title
                    }}</span>
                    </div>
                    
                    <el-submenu v-else :index="item.path">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>
                                {{ item.meta.title }}
                            </span>
                        </template>
                        <el-menu-item v-for="item1, index1 in item.children" :index="item1.path" :key="index1">
                            <span>{{ item1.meta.title }}</span>
                        </el-menu-item>
                    </el-submenu>
                </el-menu-item>
            </el-menu>
        </div>
        <div class="right">
            <router-view />
        </div>
    </div>
</template>
<script>
import { routes } from '@/router/index'
export default {
    data() {
        return {
            routes
        }
    },
    methods: {
        select(key) {
       
            if (this.$router.currentRoute.path !== key) {
                this.$router.push(key)
            }


            // setTimeout(()=>{
            //     console.clear()
            // },2000)

        }
    }
}

</script>
<style scoped>
.layout {
    width: 100vw;
    display: flex;
}

.left {
    width: 150px;
}

.right {
    width: calc(100% - 150px);
}</style>